<form class="form-horizontal col-lg-offset-4" [formGroup]="loginForm">
    <div class="form-group alert alert-info input_length">
        <label class="col-lg-4 control-label" for="username">Username</label>
        <div class="col-lg-7">
            <input type="text" class="form-control" [(ngModel)]="username" formControlName="username" placeholder="Please input username">
        </div>
    </div>
    <div class="form-group alert alert-info input_length">
        <label class="col-lg-4 control-label" for="password">Password</label>
        <div class="col-lg-7">
            <input type="password" class="form-control" [(ngModel)]="password" formControlName="password" placeholder="Please input password">
        </div>
    </div>
    <div class="form-group alert alert-info input_length">
        <div class="col-lg-1">
            <img id="captcha_img" class="captcha" alt="click to refresh" title="click to refresh" (click)="refresh()" src="/api/kaptcha" />
        </div>
        <div class="col-lg-7 col-lg-offset-3">
            <input type="text" class="form-control" [(ngModel)]="captcha" formControlName="captcha" placeholder="Please input captcha">
        </div>
    </div>

    <div class="form-group">
        <div class="col-lg-offset-1 col-lg-8">
            <button type="submit" [disabled]="!loginForm.valid" class="btn btn-default" (click)="onSubmit()">Submit</button>
            <button type="button" class="btn btn-default col-lg-offset-1" (click)="reset()">Reset</button>
        </div>
    </div>
</form>